@charset "UTF-8";
// Copyright (C) 2019 Checkmk GmbH - License: GNU General Public License v2
// This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
// conditions defined in the file COPYING, which is part of this source code package.

@use "_mixins" as *;

#main_menu {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0;
  margin: 0;

  img {
    &.icon {
      width: 20px;
      height: 20px;
    }

    &:hover {
      opacity: 1;
    }
  }

  #mk_side_search_monitoring,
  #mk_side_search_setup {
    width: 85%;
    max-width: 600px;
    padding: 2 * $spacing;

    form {
      display: flex;
      background-color: $bg-color;
      border-radius: 2px;
    }

    form:focus-within {
      border: 1px solid $success;
    }

    input {
      border: none;
    }

    input[type="text"] {
      flex-grow: 1;
      padding: 6px 0 6px $spacing;
      background: transparent;
      box-shadow: none;
    }

    input[type="button"] {
      flex-basis: 35px;
      padding: 2 * $spacing 25px 6px $spacing;
      background-color: transparent;
      background-image: url("images/icon_quicksearch.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 16px;
      filter: none;
      box-shadow: none;

      &.clearable {
        cursor: pointer;
        background-image: url("images/icon_close.svg");
        background-size: 12px;
      }
    }
  }

  #mk_side_search_field {
    background-color: $bg-color;
  }

  #mk_search_results {
    padding: $spacing 0 0;
  }

  div.popup_trigger {
    position: static;
    width: 100%;
    height: 100%;
    border-left: 4px solid $navigation-bg-color;
    box-sizing: border-box;
    margin: 0;

    &:not(.delayed):hover,
    &.active {
      border-left-color: $success;
    }

    &:not(.active) a.popup_trigger img.active {
      display: none;
    }

    &.active {
      background-color: $popup-trigger-active-bg-color;

      a.popup_trigger {
        color: $font-color-green;

        img:not(.active) {
          display: none;
        }
      }

      div.popup_menu_handler {
        visibility: visible;
      }
    }

    @mixin small-menu {
      top: inherit;
      bottom: 0;
      height: auto;

      div.navigation_bar {
        height: auto;
      }

      div.content.inner {
        height: inherit;
        border-top: none;
      }
    }

    &.help > div.popup_menu {
      @include small-menu;
      box-sizing: border-box;
      min-width: calc($single-column-main-menu-width + $popup-border-width);
    }

    &.user > div.popup_menu {
      @include small-menu;
    }

    #messages_link,
    #werks_link {
      flex-grow: 1;
      margin: auto 0 auto 5px;

      #werks_link_to,
      #messages_link_to {
        &:not(:empty) {
          padding: 2px 5px;
          color: $font-color-white;
          white-space: nowrap;
          background-color: $color-state-2-background;
          border-radius: $theme-border-radius;
        }
      }
    }

    .info_line {
      width: 100%;
      padding: $spacing 0;
      margin: auto $spacing auto 0;
      line-height: 130%;
      color: $font-color-dimmed;
      text-align: right;

      a {
        color: $font-color-dimmed;

        &:hover {
          color: $font-color-green;
        }
      }
    }

    div.popup_menu_handler {
      visibility: hidden;
      left: 64px;
      top: 0;
      width: calc(100vw - 64px);
      height: 100vh;
      position: absolute;
      z-index: 1000;
    }

    div.fullscreen-popup {
      z-index: 1001;
      width: auto;
      height: 100%;
    }

    div.popup_menu {
      position: absolute;
      top: $page-header-height;
      bottom: 0;
      left: 64px;
      min-width: $single-column-main-menu-width;
      padding-bottom: $mainmenu-spacing-bottom;
      background-color: $popup-trigger-active-bg-color;
      border-right: $popup-border;

      &.min {
        left: 48px;
      }

      a {
        text-decoration: none;
        cursor: pointer;
      }

      div.error a {
        text-decoration: underline;
      }

      &#popup_menu_user div.navigation_bar div.search_bar,
      &#popup_menu_help div.navigation_bar div.search_bar {
        flex-grow: 0;
      }

      span.new_msg {
        padding: 2px 5px;
        color: $font-color-white;
        white-space: nowrap;
        background-color: $color-state-2-background;
        border-radius: $theme-border-radius;
      }

      div.navigation_bar {
        display: flex;
        height: $mainmenu-navbar-height;
        border-bottom: 1px solid $headline-color;

        div.search_bar {
          display: flex;
          align-items: center;
          flex-grow: 1;

          + div {
            position: relative;
            flex-basis: 78px;
            padding: 21px 15px 0;

            a.more {
              float: right;
            }

            &.hidden {
              display: none;
            }
          }
        }
      }

      div.content.inner {
        display: flex;
        flex-flow: column wrap;
        height: calc(
          100vh - #{$page-header-height} - #{$mainmenu-navbar-height} - #{$mainmenu-spacing-bottom}
        );
        padding: 0;
        overflow-y: auto;

        &.hidden {
          display: none;
        }

        div.error {
          margin: $spacing;
        }

        &.search > div.topic {
          width: $single-column-main-menu-width;

          li a {
            @include ellipsis-text-overflow;
          }
        }

        div.topic {
          width: 250px;
          padding: (2 * $spacing) (2 * $spacing) 0;
          border-right: 1px solid $headline-color;
          box-sizing: border-box;

          &.single_column {
            width: $single-column-main-menu-width;
          }

          input[type="button"] {
            cursor: pointer;

            &:hover {
              color: $font-color-green;
              text-decoration: none;
            }

            &.hidden {
              display: none;
            }
          }

          h2 {
            display: flex;
            padding-bottom: 4px;
            margin: 0;
            font-size: $font-size-large;
            font-weight: $font-weight-bold;
            color: $font-color;

            span.emblem {
              margin: 0 4px 2px 0;
            }

            img + span,
            span + span {
              display: inline-block;
              margin: 3px 0 0; /* No spacing if icons per entry are used */
            }

            a.collapse_topic,
            div.spacer {
              img {
                display: none;
                float: left;
                filter: grayscale(85%);
                transform: rotate(270deg);
              }

              + img {
                margin: 0 4px 2px 0;
              }
            }
          }

          ul {
            padding-left: 0;
            line-height: $menu-item-spacing;
          }

          ul a:hover {
            color: $font-color-green;
            text-decoration: none;
          }

          li {
            margin-left: $main-menu-entry-margin-left;

            a {
              display: block;

              & > img,
              & > span.emblem {
                margin-left: -28px; /* No spacing if icons per entry are used */
              }

              &.active {
                color: $font-color-green;
              }
            }

            &.hidden {
              display: none;
            }

            img.icon {
              width: 14px;
              height: 14px;
              margin-right: 7px;
            }

            img.emblem {
              margin-right: 2px;
            }

            input.button {
              float: right;
              width: 56px;
              height: 16px;
              padding: 2px;
              margin: 0;
              margin-top: 2px;
              font-size: $font-size-small;
              line-height: 12px;
              letter-spacing: 0;
              color: $font-color-light-bg;
              background-color: $color-state-success-background;
            }

            &.show_all_items {
              display: none;
              margin-top: 2px;

              a {
                font-weight: $font-weight-bold;
              }
            }

            &.multilevel_item {
              img {
                height: 8px;
                width: 8px;
                margin-left: $spacing-half;
                filter: grayscale(85%);
              }

              &:hover img {
                filter: $svg-color-green-filter;
              }
            }
          }

          &:not(.extended) li.extended {
            display: none;
          }

          &.extended {
            &:not(.single_column) {
              width: auto;
              max-width: 100%;
            }

            padding-top: 0;
            overflow-x: hidden;
            overflow-y: scroll;
            //TODO: Replace this with simplebar
            scrollbar-width: none;
            -ms-overflow-style: none;
            &::-webkit-scrollbar {
              display: none;
            }

            h2 {
              z-index: 5;
              padding-top: 22px;

              span {
                margin-left: 0;
              }

              a.collapse_topic img {
                display: block;
              }
            }

            ul {
              display: flex;
              flex-direction: column;
              max-height: calc(100vh - 165px);
              padding-bottom: $menu-item-spacing;
              box-sizing: border-box;
            }

            li {
              width: auto;
              max-width: $single-column-main-menu-width - 60px;
              padding-left: 0;

              &.show_all_items {
                display: none;
              }

              &.warning {
                border-radius: $theme-border-radius;
                padding: $spacing-half;
                margin-top: $spacing-half;
                line-height: 1.5 * $spacing;
              }
            }
          }

          &.extendable li.show_all_items {
            display: list-item;
          }

          &.grow {
            flex-grow: 1;
          }

          ul.indented_topic_segment {
            padding-bottom: 0;

            &:not(:first-child) {
              padding-top: $spacing-half;
            }

            > span {
              margin-left: $main-menu-entry-margin-left;
              font-weight: $font-weight-bold;
            }

            li {
              margin-left: calc($main-menu-entry-margin-left + $spacing);
            }
          }
        }

        input.button {
          margin-left: 27px;
        }
      }

      div.extended_topic div.topic:not(.extended) {
        display: none;
      }

      div.multilevel_topic_segment:not(.extended) {
        display: none;
      }
    }
  }

  #popup_shadow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 65px;
    z-index: 100;
    display: none;
    cursor: default;
    background-color: $popup-shadow-color;

    &.min {
      left: 48px;
    }
  }

  div.popup_trigger.active + #popup_shadow {
    display: block;
  }

  li {
    padding: 0;
    margin: 0;
    list-style: none;

    a.popup_trigger {
      position: relative;
      display: block;
      padding: $spacing 4px $spacing 0;
      font-size: $font-size-small;
      color: $font-color;
      text-align: center;
      text-decoration: none;
      outline: none;

      img {
        margin-bottom: 8px;
      }

      span#messages_label,
      span#werks_label {
        position: absolute;
        top: 4px;
        right: 4px;
        padding: 2px 5px 1px;
        color: $font-color-white;
        background-color: $color-state-2-background;
        border-radius: 8px;
      }
      span#changes_label {
        position: absolute;
        top: 4px;
        right: 4px;
        padding: 2px 5px 1px;
        color: $font-color-black;
        background-color: $color-state-1-background;
        border-radius: 8px;
      }
    }
  }

  > li:nth-last-of-type(2) {
    margin-top: auto; // place the help and user menu at the bottom
  }
}
